<template>
  <view class="page" style="margin-top: 30rpx;">
    <!-- ===== 顶部日历 ===== -->
    <view class="calendar-wrap">
      <view class="month">{{monthLabel}}</view>
      <view class="calendar-row">
        <view class="left-placeholder"></view>
        <view
          v-for="(day, i) in weekDays"
          :key="i"
          class="calendar-day"
        
        >
         <view class="day-date">{{ day.date }}</view>
		  <view class="day-week">{{ day.week }}</view>
        </view>
      </view>
    </view>

    <!-- ===== 表格区域 ===== -->
    <scroll-view scroll-x scroll-with-animation class="table-scroll">
      <view class="table">
        <!-- 左列时间段 -->
        <view class="left-col">
          <view
            v-for="(label, rowIndex) in timeSlots"
            :key="rowIndex"
            class="left-cell"
          >
            {{ label }}
          </view>
        </view>

        <!-- 右表格 -->
        <view class="right-table">
          <view
            v-for="(row, rowIndex) in cells"
            :key="'row' + rowIndex"
            class="table-row"
          >
            <view
              v-for="(cell, colIndex) in row"
              :key="'col' + colIndex"
              class="cell"
              :style="{
                backgroundColor: colIndex % 2 === 0 ? '#D8E8FB4D' : '#FFFFFF4D',
                borderBottom: '1rpx solid #dcedff'
              }"
          
            >
              <image
                v-if="cell.status === 1"
                :src="cell.srcStatus === 1 ? '/static/resource/check_01.png' : '/static/resource/check_02.png'"
                class="check-icon"
                mode="aspectFit"
              />
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'CalendarTable',
  props: {
    monthLabel: { 
		type: String,
		 default: '' ,
	},
    weekDays: { 
      type: Array, 
      default: () => [] 
    },
    timeSlots: {
      type: Array,
      default: () => []
    },
    cells: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    toggleCell(row, col) {
      // 仅当 status=1 时切换 srcStatus
      if(this.cells[row][col].status === 1){
        this.cells[row][col].srcStatus = this.cells[row][col].srcStatus === 1 ? 0 : 1;
        this.$emit('update:cells', this.cells); // 可同步回父组件
      }
    }
  }
}
</script>

<style scoped>
.page { display: flex; flex-direction: column;background-color: #fff; }
.calendar-wrap { background-color: #287EE4;color: #fff;border-radius: 8px 8px 0px 0px;}
.month {display: flex;justify-content: center;align-items: center;  font-size: 30rpx; font-weight: bold; margin-bottom: 10rpx; height: 40px;border-bottom: 2px solid #76a0d2;;}
.calendar-row { display: flex; flex-direction: row; align-items: center; }
.left-placeholder { width: 150rpx; }
.calendar-day { flex: 1; height: 100rpx; line-height: 50rpx; text-align: center;  font-size: 26rpx; color: #fff; background-color: #287EE4; }

.table-scroll { width: 100%; }
.table { display: flex; flex-direction: row; }
.left-col { width: 150rpx; background-color: #EAF4FF; border-right: 1rpx solid #EAF4FF; }
.left-cell { height: 95rpx; line-height: 95rpx; text-align: center; font-size: 26rpx; color: #333; border-bottom: 1rpx solid #dbe5f1; }

.right-table { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); border-left: 1rpx solid #EAF4FF; }
.table-row { display: contents; }
.cell { height: 95rpx; border-right: 1rpx solid #EAF4FF; border-bottom: 1rpx solid #dbe5f1;display: flex; justify-content: center; align-items: center; transition: all 0.2s; }
.cell:active { opacity: 0.7; }
.day-date { font-size: 28rpx; font-weight: bold; }
.day-week { font-size: 24rpx; color: #EAF4FF; margin-top: -13rpx;}
.check-icon { width: 40rpx; height: 40rpx; }
</style>
